<!-- eslint-disable vue/multi-word-component-names -->
<template>
    <el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" border row-key="id">
        <el-table-column label="名称" prop="name"></el-table-column>
        <el-table-column label="权限值" prop="code"></el-table-column>
        <el-table-column label="修改时间" prop="updateTime"></el-table-column>
        <el-table-column label="操作">
            <template #default="scope">
                <el-button type="primary" icon="Plus" size="small" :disabled="scope.row.type==2" @click="insertPermisstion(scope.row)">新增</el-button>
                <el-button type="warning" icon="Edit" size="small" v-if="scope.row.level!=1" @click="editPermisstion(scope.row)">修改</el-button>
                <el-popconfirm :title="`确认删除菜单【${scope.row.name||''}】?`" width="250px" icon="Delete" @confirm="confirmDelete(scope.row.id)">
                        <template #reference>
                            <el-button type="danger" icon="Delete" size="small" >删除</el-button>
                        </template>
                    </el-popconfirm>
            </template>
        </el-table-column>
    </el-table>
    <el-dialog :title="premisstionDto.id?'编辑菜单':'新增菜单'" v-model="dialogFormVisible" width="500" @closed="resetForm">
        <el-form 
            ref="premisstionDtoRef"
            :model="premisstionDto"
            :rules="premisstionRules"
            class="demo-ruleForm"
        >
            <el-form-item label="菜单名称" :label-width="'120px'" prop="name">
                <el-input v-model="premisstionDto.name" />
            </el-form-item>
            <el-form-item label="权限值" :label-width="'120px'">
                <el-input v-model="premisstionDto.code" />
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button @click="resetForm">取 消</el-button>
            <el-button type="primary" @click="confirmInsert">确 定</el-button>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup>
    import { ref, reactive, onMounted, nextTick } from "vue";
    import { ElMessage } from "element-plus";
    import {
        getAllPermisstion,
        addUpdatePermisstion,
        deletePermisstionById
    } from "@/api/acl/menu.ts";

    const tableData = ref([]);
    let dialogFormVisible = ref(false);
    let premisstionDto = reactive({
        name: "",
        code: "",
        level: 1,
        pid:0
    });
    const premisstionDtoRef = ref();
    const premisstionRules = {
        name: [
            { required: true, message: "请输入菜单名称", trigger: "blur" },
            { min:2,max:10, message: "长度在2-10之间", trigger: "blur" }
        ]
    };  

    const insertPermisstion = (dto:unknown) => {
        dialogFormVisible.value = true;
        premisstionDto.pid = dto.id;
        premisstionDto.level = dto.level+1;
    }

    const editPermisstion = (dto:unknown) => {
        dialogFormVisible.value = true;
        Object.assign(premisstionDto, dto);
    }

    const confirmInsert =  () => {
        premisstionDtoRef.value.validate(async valid => {
            if (valid) {
                if(premisstionDto.code&&premisstionDto.code.split('.').length>1) premisstionDto.type = 2;
                else premisstionDto.type = 1;

                const res = await addUpdatePermisstion(premisstionDto);
                if (res.code === 200) {
                    ElMessage.success(premisstionDto.id?"编辑成功":"新增成功");
                    getPermisstionList();
                    resetForm();
                }else ElMessage.error(res.message);
            } else return false;
        });
     }

    const resetForm = () => {
        dialogFormVisible.value = false;
        premisstionDto = reactive({
            name: "",
            code: "",
            level: 1,
            pid:0
        });
        premisstionDtoRef.value.resetFields();

        nextTick(()=>{
            premisstionDtoRef.value.clearValidate('name');
        })
    }

    const confirmDelete = async (id: number) => {
        const res = await deletePermisstionById(id);
        if (res.code === 200) {
            ElMessage.success("删除成功");
            getPermisstionList();
        } else ElMessage.error(res.message);
    };

    const getPermisstionList = async () => {
        const res = await getAllPermisstion();
        if (res.code === 200) {
            tableData.value = res.data;
        } else ElMessage.error(res.message);
    };

    onMounted(async () => {
        getPermisstionList();
    });
</script>

<style scoped lang="scss">
    
</style>